<template>
  <div class="flex-container">
    <v-default></v-default>
    <v-column></v-column>
    <v-column-reverse></v-column-reverse>
    <v-row></v-row>
    <v-row-reverse></v-row-reverse>
    <v-wrap></v-wrap>
    <v-no-wrap></v-no-wrap>
    <v-wrap-reverse></v-wrap-reverse>
  </div>
</template>

<script>
import Default from "@components/flex/default.vue"
import flexDirectionColumn from "@components/flex/flexDirectionColumn.vue"
import flexDirectionColumnReverse from "@components/flex/flexDirectionColumnReverse.vue"
import flexDirectionRow from "@components/flex/flexDirectionRow.vue"
import flexDirectionRowReverse from "@components/flex/flexDirectionRowReverse.vue"

import wrap from "@components/flex/wrap.vue"
import nowrap from "@components/flex/nowrap.vue"
import wrapReverse from "@components/flex/wrapReverse.vue"
export default {
  name: "flexContainer",
  components: {
    "v-default": Default,
    "v-column": flexDirectionColumn,
    "v-column-reverse": flexDirectionColumnReverse,
    "v-row": flexDirectionRow,
    "v-row-reverse": flexDirectionRowReverse,
    "v-wrap": wrap,
    "v-no-wrap": nowrap,
    "v-wrap-reverse": wrapReverse,
  }
}
</script>

<style lang="scss" scoped>
@import "~@css/flexContainer.scss";
</style>